<template>
  <div>
    <el-card shadow="always">
      <!-- Category:全局组件不需要引入注册，直接使用 -->
      <Catgory></Catgory>
    </el-card>
    <!-- 底部的卡片 -->
    <el-card shadow="always" style="margin: 10px 0px">
      <div v-show="scene == 0">
        <el-button
          type="primary"
          size="default"
          :icon="Plus"
          :disabled="categortStore.c3Id == 0 ? true : false"
          @click="addSpu"
          >添加SPU</el-button
        >
        <!--table表格:用于展示某一个三级分类下全部SPU-->
        <el-table border stripe style="margin: 10px 0px" :data="spuArr">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column label="SPU名称" prop="spuName"></el-table-column>
          <el-table-column label="SPU描述" prop="description"></el-table-column>
          <el-table-column label="操作">
            <!--row:即为每一个已有SPU对象-->
            <template #="{ row, $index }">
              <el-button
                type="primary"
                size="small"
                :icon="Plus"
                title="添加SKU"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="warning"
                size="small"
                :icon="Edit"
                title="修改SPU"
                @click="updateSpu(row)"
              ></el-button>
              <el-button
                type="info"
                size="small"
                :icon="InfoFilled"
                title="查看SKU"
                @click="lookSku(row)"
              ></el-button>
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="考虑"
                :icon="InfoFilled"
                icon-color="#626AEF"
                :title="`你确定删除${row.spuName}?`"
                width="200"
                @confirm="deleteSpu(row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    title="删除SPU"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器组件 -->
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 7, 9, 11]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="getHasSpuList"
          @size-change="sizeHandler"
        />
      </div>

      <SpuForm
        v-show="scene == 1"
        @changeScene="changeScene"
        ref="spuForm"
      ></SpuForm>
      <SkuForm
        v-show="scene == 2"
        @changeScene="changeScene"
        ref="skuForm"
      ></SkuForm>
    </el-card>
    <!--v-model:控制对话框显示与隐藏-->
    <el-dialog
      v-model="dialogTableVisible"
      title="展示SKU列表"
      style="top: 100px"
    >
      <el-table border stripe :data="skuArr">
        <el-table-column label="sku名称" prop="skuName"></el-table-column>
        <el-table-column label="sku价格" prop="price"></el-table-column>
        <el-table-column label="sku重量" prop="weight"></el-table-column>
        <el-table-column label="sku图片">
          <template #="{ row, $index }">
            <img :src="row.skuDefaultImg" alt="" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useCategoryStore } from "@/stores/catgory";
import { Delete, Edit, InfoFilled, Plus } from "@element-plus/icons-vue";
import { onBeforeUnmount, ref, watch } from "vue";
import {
  reqHasSpuList,
  reqRemoveSpu,
  reqSkuList,
} from "@/api/product/spu/index";
import { ElMessage } from "element-plus";
import SpuForm from "./Spuform.vue";
import SkuForm from "./Skuform.vue";

//获取仓库信息
let categortStore = useCategoryStore();
//定义当前页响应式数据
let currentPage = ref<number>(1);
//定义一页展示几个响应式数据
let pageSize = ref<number>(3);

//定义一个变量用来存储响应回来的数据
let spuArr = ref([]);

//定义数据总数
let total = ref(0);

//存储对应SPU模块场景切换数值
let scene = ref<number>(0);

//获取spu子组件实例
let spuForm = ref();

//获取sku子组件实例
let skuForm = ref();

//控制对话框显示与隐藏
let dialogTableVisible = ref(false);

//存储查看spu按钮响应的数据
let skuArr = ref();

//获取spu数据的函数
let getHasSpuList = async (pager: number = 1) => {
  try {
    currentPage.value = pager;
    let result: any = await reqHasSpuList(
      currentPage.value,
      pageSize.value,
      categortStore.c3Id
    );
    spuArr.value = result.records;
    total.value = result.total;
  } catch (e: any) {
    ElMessage.error("获取数据失败，" + e.message);
  }
};
//选取到三级分类的时候发送请求获取数据
watch(
  () => categortStore.c3Id,
  () => {
    //监听到三级分类ID变化,获取这个三级分类的已有SPU数据
    getHasSpuList();
  },
  {
    deep: true,
  }
);
//修改页面展示数的回调
const sizeHandler = () => {
  getHasSpuList();
};
//spu子组件的回调事件
const changeScene = ({ val, flag }) => {
  scene.value = val;
  if (flag == "update") {
    getHasSpuList(currentPage.value);
  } else {
    getHasSpuList();
  }
};
//spu修改的回调事件
const updateSpu = (spu: any) => {
  scene.value = 1;
  spuForm.value.getSpuListInfoFour(spu);
};
//spu添加的回调函数
const addSpu = () => {
  scene.value = 1;
  spuForm.value.initAddSpu(categortStore.c3Id);
};
//点击加号按钮新增sku
const addSku = (spu: any) => {
  scene.value = 2;
  skuForm.value.initAddSku(categortStore.c1Id, categortStore.c2Id, spu);
};
//弹出dialog
const lookSku = async (row: any) => {
  //显示对话框
  dialogTableVisible.value = true;
  // 发送请求获取数据
  let result = await reqSkuList(row.id);
  skuArr.value = result;
  console.log(skuArr.value);
};
//删除spu按钮
const deleteSpu = async (row: any) => {
  try {
    await reqRemoveSpu(row.id);
    ElMessage.success("删除成功");
    getHasSpuList(
      spuArr.value.length > 1 ? currentPage.value : currentPage.value - 1
    );
  } catch (e) {
    ElMessage.error("删除失败");
  }
};

//路由组件销毁的时候:仓库数据清空
onBeforeUnmount(() => {
  //当前路由组件销毁之前,仓库数据前部情况
  categortStore.c1Id = "";
  categortStore.c2Id = "";
  categortStore.c3Id = "";
  categortStore.c1Arr = [];
  categortStore.c2Arr = [];
  categortStore.c3Arr = [];
});
</script>

<style scoped>
</style>